<template>
  <div class="login">
    <!-- 顶部 -->
    <van-nav-bar title="登录">
      <!-- 左侧 -->
      <template #left>
        <van-icon name="arrow-left" color="#fff" @click="go" />
      </template>
      <!-- 右侧 -->
      <template #right>
        <router-link to="/register">注册</router-link>
      </template>
    </van-nav-bar>

    <!-- 通知栏 -->
    <van-notice-bar left-icon="volume-o" :text="msg" />
    <!-- https://api.uixsj.cn/hitokoto/get?type=social -->

    <!-- 头像 -->
    <van-image
      class="login_img"
      width="8rem"
      height="8rem"
      :src="require('../assets/icon.png')"
    />

    <!-- 标签栏 -->
    <van-tabs type="card" color="#1989fa" animated swipeable @click="onClick">
      <!-- 用户名表单 -->
      <van-tab title="用户名" style=" margin-top: 10px;">
        <van-form @submit="onSubmit">
          <!-- 用户名 -->
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true }]"
          />
          <!-- 密码 -->
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true }]"
          />
          <!-- 登录按钮 -->
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >用户名登录</van-button
            >
          </div>
        </van-form>
      </van-tab>

      <!-- 手机号表单 -->
      <van-tab title="手机号码" style=" margin-top: 10px;">
        <van-form @submit="onSubmit2">
          <!-- 手机号 -->
          <van-field
            v-model="phone"
            name="手机号码"
            label="手机号码"
            placeholder="请输入手机号码"
            :rules="[{ required: true }]"
          />
          <!-- 密码 -->
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true }]"
          />
          <!-- 登录按钮 -->
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >手机号码登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      phone: "",
      password: "",
      msg: "",
    };
  },
  methods: {
    // 通知栏文字
    notice() {
      this.axios.get(`hitokoto/get?type=social`).then((result) => {
        this.msg = result.data;
      });
    },
    // 点击用户名登录之后执行，验证表单
    onSubmit() {
      this.axios
        .post("/login1", `username=${this.username}&password=${this.password}`)
        .then((result) => {
          if (result.data.code == 200) {
            let that = this;
            Toast({
              message: "登录成功",
              duration: 3000,
              onClose: function() {
                // 接收数据库返回的信息
                that.$store.commit("loninOK", [
                  result.data.result.username,
                  result.data.result.nickname,
                  result.data.result.avatar,
                  result.data.result.phone,
                ]);
                that.$router.push("/homes");
              },
            });
          } else if (result.data.code == 201) {
            Toast.fail("登录失败");
          }
        });
    },
    // 点击手机号码登录之后执行，验证表单
    onSubmit2() {
      this.axios
        .post("/login2", `phone=${this.phone}&password=${this.password}`)
        .then((result) => {
          if (result.data.code == 200) {
            let that = this;
            Toast({
              message: "登录成功",
              duration: 3000,
              onClose: function() {
                // 接收数据库返回的信息
                that.$store.commit("loninOK", [
                  result.data.result.username,
                  result.data.result.nickname,
                  result.data.result.avatar,
                  result.data.result.phone,
                ]);
                that.$router.push("/homes");
              },
            });
          } else if (result.data.code == 201) {
            Toast.fail("登录失败");
          }
        });
    },
    // 标签页清空
    onClick(_, title) {
      if (title == "用户名") {
        (this.username = ""), (this.password = "");
      } else {
        (this.phone = ""), (this.password = "");
      }
    },
    // 回退一步
    go() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.notice();
  },
};
</script>

<style scoped>
.login {
  text-align: center;
}
.login .van-nav-bar {
  /* 统一主色调 */
  background-color: rgb(123, 183, 253);
}
.login .van-nav-bar__title,
.login .van-nav-bar__left a,
.login .van-nav-bar__right a {
  color: white;
}
.login .van-button {
  border: 0;
}
.login .login_img {
  margin-top: 30px;
  margin-bottom: 30px;
}
/* .login {
background: #fff url('../assets/22.jpg') center center no-repeat;
} */
</style>
